<template>
<div class="imagebox" :style="styleColor">
  <img
      :style="imgStyle"
      :src="imageAdress"
      alt=""
    />
</div>
</template>

<script>
import * as TWEEN from '@tweenjs/tween.js'
export default {
  name: 'widgetDevice9',
  props: {
    value: Object,
    ispreview: Boolean
  },
  components: {},
  data() {
    return {
      // 补间毫秒数 (小于动态请求的间隔时间)
      tweenTime:2000,
      // 风扇当前圈 0-360
      currentDeg:0,
      // 风扇状态
      fanStatus:false,
      tweenRotateSpeed:0,
      tween:undefined,
      options: {},
      imageAdress:require('../../image/通风风扇.svg')
    }
  },
  computed: {
    imgStyle() {
      return {
        width:'100%',
        height:'100%',
        opacity: this.transStyle.transparency / 100,
        transform: `rotate(${this.currentDeg}deg) scaleX(${this.transStyle.leftRightImage?'-1':'1'}) scaleY(${this.transStyle.topButtomImage?'-1':'1'})`,
      };
    },
    transStyle() {
      return this.objToOne(this.options);
    },
    styleColor() {
      return {
        position: this.ispreview ? "absolute" : "static",
        background: this.transStyle.background,
        "text-align": this.transStyle.textAlign,
        width: this.transStyle.width + "px",
        height: this.transStyle.height + "px",
        left: this.transStyle.left + "px",
        top: this.transStyle.top + "px",
        right: this.transStyle.right + "px"
      };
    },
  },
  watch: {
    value: {
      handler(val) {
        this.options = val;
        this.setOptions();
        // 把速度赋值
        this.tweenRotateSpeed = val.setup.rotateSpeed
      },
      deep: true
    }
  },
  created() {
    this.options = this.value;
  },
  mounted() {
    this.setOptions();
    requestAnimationFrame(this.animate)
  },
  methods: {
    setOptions() {
      const optionsData = this.value.data;
      return optionsData.dataType == "staticData"
        ? this.staticData(optionsData.staticData)
        : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
    },
    staticData(data) {
      // this.fanStatus = data[0].status;
      this.tweenChange(data[0].status)
    },
      //动态数据字典解析
      dynamicDataFn(val, refreshTime) {
      if (!val) return;
      if (this.ispreview) {
        this.getEchartData(val);
        this.flagInter = setInterval(() => {
          this.getEchartData(val);
        }, refreshTime);
      } else {
        this.getEchartData(val);
      }
    },
    getEchartData(val) {
      const data = this.queryEchartsData(val);
      data.then((res) => {
        this.renderingFn(res);
      });
    },
    renderingFn(val) {
      // this.fanStatus = val[0].value;
      this.tweenChange(val[0].status)
    },
    // 补间
    tweenChange(status){
      if(status!=this.fanStatus){
        // 开启
        if(status){
          this.fanStatus = status
          let startDeg = {y: 0}
          let endDeg = {y: this.transStyle.rotateSpeed}
          this.tween = new TWEEN.Tween(startDeg,false).to(endDeg, this.tweenTime).easing(TWEEN.Easing.Quadratic.InOut).onUpdate(() => {
          this.tweenRotateSpeed = startDeg.y
      }).start()
        }else{
          // 关闭
          let startDeg = {y: this.transStyle.rotateSpeed}
          let endDeg = {y: 0}
          this.tween = new TWEEN.Tween(startDeg,false).to(endDeg, this.tweenTime).easing(TWEEN.Easing.Quadratic.InOut).onUpdate(() => {
          this.tweenRotateSpeed = startDeg.y
        }).onComplete(()=>{
          this.fanStatus = status
        }).start()
      }
    }
    },
     // 设置动画循环。
     animate(time){
      if(this.tween){
        this.tween.update(time)
      }
      // 风扇转起
      if(this.fanStatus){
      // 旋转速度
      let rotateSpeed = (this.tweenRotateSpeed) / 10 * (this.transStyle.rotateDirection?1:-1)
      this.currentDeg = (this.currentDeg + rotateSpeed ) % 360
      }
		requestAnimationFrame(this.animate)
    }
  }
}
</script>

<style lang="scss" scoped>
.imagebox {
  width: 100%;
  height: 100%;
  overflow: hidden;
}


</style>

